<template>
  <div class="contain w-100 " style="position:relative;"> 
    <div class="title">
      <div v-for="item in titlelist" style="width: 33%; text-align: center">
        {{ item }}
      </div>
    </div>
    <div class="boxbottom d-flex">
      <div style="width: 65%; padding: 30px 10px 30px 30px">
        <!-- 左1 -->
        <div class="boxbottom_item">
          <div class="itemLeft">
            <div>生活污水</div>
            <div class="d-flex justify-content-between p-1">
              <div style="color: #1bfbfa">{{ data1[0] }}</div>
              <div>万吨/年</div>
            </div>
          </div>

          <div class="itemRight ">
            <div style="color: #1bfbfa;margin-left: 10px;">{{ data1[1] }}%</div>
            <div style="width: 70px; height: 70px" id="yong2_1"></div>
            <div style="color: #1bfbfa">污水利用率</div>
          </div>
        </div>
        <!-- 左2 -->
        <div class="boxbottom_item mt-4">
          <div class="itemLeft">
            <div>工业废水</div>
            <div class="d-flex justify-content-between p-1">
              <div style="color: #1bfbfa">{{ data2[0] }}</div>
              <div>万吨/年</div>
            </div>
          </div>

          <div class="itemRight">
            <div style="color: #1bfbfa;margin-left: 10px;">{{ data2[1] }}%</div>
            <div style="width: 70px; height: 70px" id="yong2_22"></div>
            <div style="color: #1bfbfa">污水利用率</div>
          </div>
        </div>
      </div>
      <div style="width: 30%; padding: 15px 0 15px 10px; font-size: 20px">
        <div v-for="item in lyData" style="height: 20%;text-align:right" >
          {{ item.label }}
        </div>
      </div>
    </div>
    <div style="position: absolute;" class="arrow">

    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const titlelist = ref(["收集", "转化", "利用"]);
const data1:any = ref([]);
const data2 :any= ref([]);
const lyData:any = ref([

]);
const props = defineProps({
  selectValue: {
    type: Number,
    default: 2024,
  },
  echartsData: {
    type: Array,
    default: () => [],
  },
});
const current = computed(() => {
  
  let data:any = [];
  try {
    data = props.echartsData[props.selectValue];
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {

    if (val) {
      data1.value=val[0]
      data2.value=val[1]
      lyData.value=val[2]
  myChart.setOption(getOption(data1.value [1]));
  myChart1.setOption(getOption(data2.value[1]));

    }
  }
);

const getOption = (data: any) => {
  return {
    title: {
      left: "center",
      top: "center",
      itemGap: 0,
    },
    angleAxis: {
      max: 100,
      // 隐藏刻度线
      show: false,
      startAngle: 90,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    polar: {
      radius: "100%", //图形大小
    },
    series: [
      {
        type: "bar",
        data: [data],
        showBackground: true,
        backgroundStyle: {
          color: "rgba(64, 76, 76, 1)",
        },
        coordinateSystem: "polar",
        barWidth: 10,
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#1BFBFA",
                },
                {
                  offset: 1,
                  color: "#1BFBFA",
                },
              ],
              global: false,
            },
          },
        },
      },
    ],
  };
};
let myChart: any;
let myChart1: any;
onMounted(() => {
  data1.value=props.echartsData[props.selectValue][0]
  data2.value=props.echartsData[props.selectValue][1]
  lyData.value=props.echartsData[props.selectValue][2]

  myChart = echarts.init(document.getElementById("yong2_1") as HTMLElement);
  myChart.setOption(getOption(data1.value [1]));
  myChart1 = echarts.init(document.getElementById("yong2_22") as HTMLElement);
  myChart1.setOption(getOption(data2.value[1]));
});
</script>

<style lang="less" scoped>
.contain {
  background: url("@/assets/image/underGround/yong6.png") no-repeat center;
  background-size: 100% 100%;
  height: 75%;
}
.title {
  width: 100%;
  height: 18%;
  display: flex;
  justify-content: space-between;
  font-size: 25px;
  line-height: 55px;
}
.boxbottom {
  width: 100%;
  height: 85%;
  &_item {
    width: 400px;
    height: 72px;
    background: url("@/assets/image/underGround/yong5.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
  }
}
.itemLeft {
  width: 35%;
  height: 100%;
  padding: 0 10px 0 10px;
  text-align: center;
  font-size: 20px;
}
.itemRight {
  display: flex;
  line-height: 72px;
  font-size: 20px;
}
.arrow{
  width: 62px;
    height: 62px;
    background: url("@/assets/image/svg/arrow.png") no-repeat center;

    background-size: 100% 100%;
    top: 49%;
    left: 59%;
}
</style>
